<template>
	<view class="bg-white">
		<view class="padding-sm" style="background-color: #ebfbef;color: #569a62;font-size: 24rx;">
			欢迎来到瀚生电子签，注册需要认证个人信息，需要完整的身份信息，请花几分钟完成身份认证。
		</view>
		<view class="padding-sm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="name" :label-position="labelPosition" :label-style="labelStyle"
					style="color: #000000;font-weight: bold;font-size: 4rpx;line-height: 26rpx;">
					<u-input :border="border" v-model="form.name" placeholder="请输入您真实姓名" />
				</u-form-item>
				<u-form-item label="身份证号" prop="card" :label-position="labelPosition"
					style="color: #000000;font-weight: bold;font-size: 48rpx;">
					<u-input :border="border" v-model="form.card" placeholder="请输入您真实身份证号码" />
				</u-form-item>
				<u-form-item label="手机号码" prop="mobile" :label-position="labelPosition"
					style="color: #000000;font-weight: bold;font-size: 48rpx;">
					<u-input :border="border" type="tel" v-model="form.mobile" placeholder="请输入您真实手机号码" />
				</u-form-item>
				<u-form-item label="电子邮箱" prop="email" :label-position="labelPosition"
					style="color: #000000;font-weight: bold;font-size: 48rpx;">
					<u-input :border="border" v-model="form.email" placeholder="请输入您电子邮箱（选填）" />
				</u-form-item>
				<u-form-item label="业务员姓名" prop="salesman_name" :label-position="labelPosition"
					style="color: #000000;font-weight: bold;font-size: 48rpx;">
					<u-input :border="border" v-model="form.salesman_name" placeholder="请输入为您服务的业务员姓名" />
				</u-form-item>
				<u-form-item label="业务员手机" prop="salesman_mobile" :label-position="labelPosition"
					style="color: #000000;font-weight: bold;font-size: 48rpx;">
					<u-input :border="border" v-model="form.salesman_mobile" placeholder="请输入为您服务的业务员手机号" />
				</u-form-item>
				<u-form-item v-if="list.length > 0" label="预约合作公司" prop="company" label-position="left"
					label-width="200" style="color: #000000;font-weight: bold;font-size: 48rpx;">

					<u-radio-group v-model="form.company" :wrap="true" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<view class="agreement-text text-red text-bold">
					说明：业务员姓名及电话填写正确方可登录
				</view>
				<view class="agreement">
					<u-checkbox v-model="agreement"></u-checkbox>
					<view class="agreement-text">
						我已阅读并同意<text @click="open('qiye')">《瀚生电子签服务协议》</text><text @click="open('gerem')">《隐私协议》</text>
					</view>
				</view>
			</u-form>
			<view class="">
				<button class="cu-btn block bg-blue margin-tb-sm lg" type="" @click="update">登陆</button>
				<button class="cu-btn block line-blue margin-tb-sm lg" @click="xiankankan">先看看</button>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				form: {
					name: '',
					card: '',
					mobile: '',
					email: '',
					salesman_name: '',
					salesman_mobile: '',
					company: []
				},
				agreement: false,
				labelPosition: 'top',
				border: false,
				labelStyle: {
					'line-height': '26rpx'
				},
				rules: {
					name: [{
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '姓名不正确',
						trigger: ['change', 'blur'],
					}],
					card: [{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号不正确',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号不正确',
						trigger: ['change', 'blur'],
					}],
					salesman_mobile: [{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '业务员手机号不正确',
						trigger: ['change', 'blur'],
					}],
					company: [{
						required: true,
						message: '请选择预约合作公司',
						trigger: ['change', 'blur'],
					}]
				},
				list: [],
				iszuzhi: false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			that = this
		},
		watch: {
			form: {
				handler(val, oldVal) {
					console.log(val);
					console.log(oldVal);
					if (that.iszuzhi && val.salesman_name != oldVal.salesman_name) {
						that.iszuzhi = false
					}
					if (that.iszuzhi && val.salesman_mobile != oldVal.salesman_mobile) {
						that.iszuzhi = false
					}
					if (val.salesman_name && this.$u.test.mobile(val.salesman_mobile)) {
						that.$u.post('qiyue/zuzhi', that.form).then(res => {
							if (res.code == 300) {
								that.iszuzhi = false
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: "none"
								});
								that.list = []
								return false
							} else {
								that.iszuzhi = true
								if (that.list.length < 1) {
									that.list = res
								}
							}
						})
					}
				},
				deep: true
			}
		},
		methods: {
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			open(e) {
				wx.downloadFile({
					// 示例 url，并非真实存在
					url: 'https://wx.qdhansen.com/' + e + '.pdf',
					success: function(res) {
						const filePath = res.tempFilePath
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					}
				})
			},
			xiankankan() {
				uni.switchTab({
					url: '/pages/index/index',
					success() {
						uni.setStorageSync('islogin', 1);
					}
				})
			},
			update() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.agreement) return this.$u.toast('请勾选协议');
						that.$u.post('index/update', that.form).then(res => {
							if (res.code == 300) {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: "none"
								});
								return false
							}
							uni.switchTab({
								url: '../index/index'
							})
						})
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
